<template>
  <el-form
      ref="formRef"
      :model="formData"
      label-width="auto"
      class="mb-6 bg-white p-4 rounded-lg shadow"
  >
    <el-row :gutter="20">
      <el-col
          v-for="(field, index) in fields"
          :key="index"
          :xs="24"
          :sm="12"
          :md="8"
          :lg="6"
      >
        <el-form-item :label="field.label" :prop="field.prop">
          <component
              :is="field.component"
              v-model="formData[field.prop]"
              v-bind="field.props">
            <template v-if="field.options">
              <component
                  v-for="option in field.options"
                  :key="option.value"
                  :is="field.component === 'el-select' ? 'el-option' : 'el-radio'"
                  :label="option.label"
                  :value="option.value"
              />
            </template>
          </component>
        </el-form-item>
      </el-col>
    </el-row>

    <div class="flex justify-end space-x-3">
      <el-button @click="handleReset">重置</el-button>
      <el-button type="primary" @click="handleSubmit">搜索</el-button>
    </div>
  </el-form>
</template>

<script setup>
import { ref, reactive } from 'vue'

const props = defineProps({
  fields: {
    type: Array,
    required: true
  }
})

const emit = defineEmits(['search', 'reset'])

const formRef = ref(null)
const formData = reactive({})

// 初始化表单数据
props.fields.forEach(field => {
  formData[field.prop] = field.props?.value || ''
})

const handleSubmit = () => {
  emit('search', formData)
}

const handleReset = () => {
  formRef.value.resetFields()
  emit('reset')
}
</script>